<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript">
        /**
         * 加载成功之后回调
         */
        window.onload = function (ev) {
            var p = document.getElementsByTagName("p")[0];
            console.log(p.childNodes[0].textContent);//p的文本子结点的值

            //createNodeAndAppendTest()
            createNodeAndInsertBefore();
        };

        /**
         * 创建并添加结点
         */
        function createNodeAndAppendTest() {
            var textNodeOne = document.createTextNode("链接五");//创建文本结点的方法
            var aNode = document.createElement("a");//创建元素结点a
            aNode.appendChild(textNodeOne);
            var liNode = document.createElement("li");//创建元素结点li
            liNode.appendChild(aNode);
            var ul = document.getElementById("ul_my");
            ul.appendChild(liNode);
        }

        /**
         * 创建结点并添加到某个结点之前
         */
        function createNodeAndInsertBefore() {
            var textNodeOne = document.createTextNode("链接五");//创建文本结点的方法
            var aNode = document.createElement("a");//创建元素结点a
            aNode.appendChild(textNodeOne);
            var liNode = document.createElement("li");//创建元素结点li
            liNode.appendChild(aNode);
            var ul = document.getElementById("ul_my");

            var liTwo = ul.getElementsByTagName("li")[1];
            ul.insertBefore(liNode, liTwo);//insertBefore必须用父结点来调用

        }

    </script>
</head>

<body>
<p>
    这是一个段落
</p>

<ul id="ul_my">
    <li>
        <a>链接一</a>
    </li>
    <li>
        <a>链接二</a>
    </li>
    <li>
        <a>链接三</a>
    </li>
</ul>


</body>


</html>
